@charset "utf-8";

$baifen:100%;
html{font-size: 31.25vw;}
/* ***** 之后除以2再除以100 ***** */
input{
    border: none;
    outline: none;
    vertical-align : middle;
}
html,body{
    width: $baifen;
    height: $baifen;
}
#box{
    height: $baifen;
    display: flex;
    flex-direction:column;
}
/* ***** 导航 ***** */
#top{
    height: 1.035rem;
    box-sizing: border-box;
    padding: 0 0.145rem;
    overflow: hidden;
    .top1{
        height: 0.305rem;
        display: flex;
        justify-content:space-around;
        align-items:center;
        position: relative;
        li{
            font-size: 0.1rem;
            padding-bottom: 0.045rem;
            border-bottom: 0.03rem solid #ff2969;
            border-bottom-right-radius: 0.01rem;
            border-bottom-left-radius: 0.01rem;
            color: #9c9ca4;
        }
        span{
            position: absolute;
            right: 0;top: 50%;
            transform: translate( 0,-50%);
            font-size: 0.145rem !important;
        }
    }
    .top2{
        height: 0.295rem;
        overflow-x: auto;
        .top2-con{
            width: 150%;
            height: 0.295rem;
            display: flex;
            justify-content:space-around;
            align-items:center;
            li{
                font-size: 0.085rem;
                color: #9c9ca4;
            }
        }
    }
    .top3{
        height: 0.3375rem;
        display: flex;
        justify-content:space-between;
        .top3-con1{
            height: 0.3375rem;
            width: 0.885rem;
            display: flex;
            justify-content:space-between;
            align-items:center;
            li{
                font-size: 0.08rem;
                color: #9c9ca4;
            }
            .li{
                font-size: 0.1rem;
                color: #eeeeee;
            }
        }
        .top3-con2{
            height: 0.3375rem;
            width: 0.91rem;
            position: relative;
            ul{
                position: absolute;top: 50%;
                transform: translate(0,-50%);
                width: 0.91rem;
                height: 0.1725rem;
                background: #f2f2f2;
                border-radius: 0.08rem;
                display: flex;
                justify-content:space-between;
                li{
                    width: 0.295rem;
                    height: 0.1675rem;
                    border: 1px solid #f2f2f2;
                    border-radius: 0.08rem;
                    text-align: center;
                    line-height: 0.1675rem;
                    font-size: 0.085rem;
                    background: #fff;
                }
            }
        }
    }
}
/* ***** 主体 ***** */
#center{
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 0.145rem;
    .center1{
        height: 1.105rem;
        display: flex;
        justify-content:space-around;
        .center-con1{
            width: 0.67rem;
            height: 0.91rem;
            border: 1px solid #ccc;
            border-radius: 0.035rem;
            background: url(./../img/tu1.gif) no-repeat center;
            background-size: contain;
        }
        .center-con2{
            width: 1.65rem;
            height: 0.91rem;
            position: relative;
            h2{
                font-size: 0.1rem;
                height: 0.175rem;
            }
            ul{
                height: 0.105rem;
                line-height: 0.105rem;
                font-size: 0.06rem;
                color: #9b9ba3;
            }
            .ul1{
                margin-top: 0.15rem;
            }
            .ul3{
                margin-top: 0.05rem;
                display: flex;
                li{
                    width: 0.5rem;
                    height: 0.105rem;
                    text-align: center;
                    margin-right: 0.05rem;
                    border-radius: 0.05rem;
                    background: #ff2969
                }
            }
            .li1{
                font-size: 0.065rem;
                color: #9c9ca4;
                margin-top: 0.1rem;
                span{
                    font-size: 0.085rem;
                    color: #ff2969;
                }
            }
            .box{
                display: flex;
                position: absolute;
                right: 0;bottom: 0;
                font-size: 0.08rem;
                img{
                    width: 0.425rem;
                }
            }
        }
    }
}
/* ***** 底部 ***** */
#bottment{
    height: 0.435rem;
    display: flex;
    font-size: 0.065rem;
    justify-content: space-around;
    align-items:center;
    color: #9d9ea3;
    span{
        font-size: 0.155rem !important;
        margin-bottom: 0.01rem;
    }
    div{
        text-align: center;
        display: flex;
        flex-direction:column;
        justify-content:space-around;
    }
}